---
slug: ../../Calendar
---

import Basic from "../../../_samples/main/Calendar/Basic/Basic.md";
import Bounds from "../../../_samples/main/Calendar/Bounds/Bounds.md";
import CalendarTypes from "../../../_samples/main/Calendar/CalendarTypes/CalendarTypes.md";
import CalendarWithLegend from "../../../_samples/main/Calendar/CalendarWithLegend/CalendarWithLegend.md"
import SelectionModes from "../../../_samples/main/Calendar/SelectionModes/SelectionModes.md";
import CalendarInDifferentTimezone from "../../../_samples/main/Calendar/CalendarInDifferentTimezone/CalendarInDifferentTimezone.md";
import CalendarWeekNumbering from "../../../_samples/main/Calendar/CalendarWeekNumbering/CalendarWeekNumbering.md";
import CalendarWithDisabledDates from "../../../_samples/main/Calendar/CalendarWithDisabledDates/CalendarWithDisabledDates.md";
import useBaseUrl from "@docusaurus/useBaseUrl";
import Link from '@docusaurus/Link';

<%COMPONENT_OVERVIEW%>

## Basic Sample
<Basic />

<%COMPONENT_METADATA%>

## More Samples

### Selection Modes
The Calendar supports <b>Single</b>, <b>Multiple</b> and <b>Range</b> selection.

<SelectionModes />


### Min and Max Dates
Define min and max date boundaries to contrain user choice.

<Bounds />

### Calendar Types
Several calendars are supported: Gregorian, Islamic, Persian and Japanese.

<CalendarTypes />

### Calendar with Legend
You can use the [CalendarLegend](../CalendarLegend/CalendarLegend.mdx) component in addition to the Calendar to highlight specific days.
Discover all the available <Link to={useBaseUrl("/components/CalendarLegend#calendarlegenditem-types")}>CalendarLegendItem Types</Link>.

<CalendarWithLegend />


### Timezones
You can set to the configuration the preferred time zone, such as: Asia/Tokyo, Pacific/Apia, Asia/Kolkata, Europe/Sofia and etc.
<CalendarInDifferentTimezone />

### CalendarWeekNumbering
You can use the component, the preferred week numbering and first day of week.
<CalendarWeekNumbering />

### Calendar with Disabled Dates
Define disabled dates
<CalendarWithDisabledDates />